<template>
	<view class="container">
		<!-- 状态栏 -->
		<view class="status-bar">
			<view class="status-info">
				<text class="time">12:00</text>
				<view class="status-icons">
					<view class="signal-icon">📶</view>
					<view class="wifi-icon">WiFi</view>
					<view class="battery-icon">🔋</view>
				</view>
			</view>
		</view>

		<!-- 导航栏 -->
		<view class="nav-bar">
			<view class="back-icon" @click="goBack">❮</view>
			<text class="title">历史券</text>
		</view>

		<!-- 标签页 -->
		<view class="tab-bar">
			<view class="tab-item" :class="{ active: currentTab === 'used' }" @click="changeTab('used')">已使用</view>
			<view class="tab-item" :class="{ active: currentTab === 'expired' }" @click="changeTab('expired')">已过期
			</view>
		</view>

		<!-- 优惠券列表 -->
		<view class="coupon-list">
			<block v-for="(coupon, index) in filteredCoupons" :key="index">
				<view class="coupon-card">
					<view class="coupon-left">
						<view class="amount-box">
							<text v-if="coupon.type === 'discount'" class="amount-label">折扣</text>
							<text v-else class="amount-label">{{ coupon.condition }}</text>
							<text v-if="coupon.type === 'discount'" class="amount">{{ coupon.amount }}%</text>
							<text v-else class="amount">{{ coupon.amount }}</text>
							<text v-if="coupon.type !== 'discount'" class="amount-unit">元</text>
						</view>
					</view>
					<view class="coupon-right">
						<view class="coupon-title">{{ coupon.title }}</view>
						<view class="coupon-desc">{{ coupon.description }}</view>
						<view class="coupon-time">{{ coupon.validity }}</view>
						<view class="status-tag">{{ coupon.status === 'used' ? '已使用' : '已过期' }}</view>
						<view class="detail-btn" @click="showDetail(index)">详细说明</view>
					</view>
				</view>
			</block>
		</view>

		<!-- 详细说明弹窗 -->
		<view v-if="showDetailModal" class="modal-mask">
			<view class="modal-content">
				<view class="modal-header">
					<text class="modal-title">{{ currentCoupon.title }}</text>
					<view class="close-btn" @click="closeModal">×</view>
				</view>
				<view class="modal-body">
					<view class="detail-item">
						<text class="detail-label">优惠类型:</text>
						<text class="detail-value">{{ currentCoupon.type === 'discount' ? '折扣券' : '满减券' }}</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">优惠金额:</text>
						<text
							class="detail-value">{{ currentCoupon.type === 'discount' ? currentCoupon.amount + '%' : currentCoupon.amount + '元' }}</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">使用条件:</text>
						<text class="detail-value">{{ currentCoupon.condition }}</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">有效期:</text>
						<text class="detail-value">{{ currentCoupon.validity }}</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">说明:</text>
						<text class="detail-value">{{ currentCoupon.description }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';

	// 当前选中的标签
	const currentTab = ref('used');

	// 是否显示详细说明弹窗
	const showDetailModal = ref(false);

	// 当前显示的优惠券详情
	const currentCouponIndex = ref(-1);

	// 优惠券数据
	const coupons = ref([{
			title: '周末亲子游满减券',
			amount: '5.5',
			type: 'discount',
			condition: '无门槛',
			validity: '有效期至长期',
			description: '周六周日福利日，亲子主题旅游立减50%，最高优惠200元；优惠券仅限本人使用，不可转赠或出售给他人',
			status: 'expired'
		},
		{
			title: '冬日暖阳满减券',
			amount: '5',
			type: 'cash',
			condition: '满100可用',
			validity: '2098.11.01 - 2099.03.31',
			description: '周六周日福利日，温泉主题旅游尊享满100元减5元优惠',
			status: 'expired'
		},
		{
			title: '新人奖励红包',
			amount: '5',
			type: 'cash',
			condition: '无门槛',
			validity: '有效期至长期',
			description: '每订单立减5元；优惠券仅限本人使用，不可转赠或出售给他人',
			status: 'used'
		},
		{
			title: '冬日暖阳满减券',
			amount: '5',
			type: 'cash',
			condition: '满100可用',
			validity: '2098.11.01 - 2099.03.31',
			description: '周六周日福利日，温泉主题旅游尊享满100元减5元优惠',
			status: 'used'
		}
	]);

	// 当前显示的优惠券详情
	const currentCoupon = ref({});

	// 根据当前标签过滤优惠券
	const filteredCoupons = computed(() => {
		return coupons.value.filter(coupon => coupon.status === currentTab.value);
	});

	// 切换标签
	const changeTab = (tab) => {
		currentTab.value = tab;
	};

	// 显示详细说明
	const showDetail = (index) => {
		currentCouponIndex.value = index;
		currentCoupon.value = filteredCoupons.value[index];
		showDetailModal.value = true;
	};

	// 关闭弹窗
	const closeModal = () => {
		showDetailModal.value = false;
	};

	// 返回
	const goBack = () => {
		uni.navigateBack();
	};
</script>

<style scoped>
	.container {
		background-color: #f5f5f5;
		height: 100vh;
	}

	/* 状态栏 */
	.status-bar {
		height: 30px;
		background-color: #fff;
		padding: 0 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #eee;
	}

	.status-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}

	.time {
		font-size: 14px;
		color: #333;
	}

	.status-icons {
		display: flex;
		align-items: center;
	}

	.signal-icon,
	.wifi-icon,
	.battery-icon {
		margin-left: 10px;
		font-size: 14px;
	}

	/* 导航栏 */
	.nav-bar {
		height: 44px;
		background-color: #fff;
		padding: 0 15px;
		display: flex;
		/* justify-content: space-between; */
		align-items: center;
		border-bottom: 1px solid #eee;
	}

	.back-icon {
		font-size: 24px;
		color: #333;
	}

	.title {
		font-size: 18px;
		font-weight: bold;
		color: #333;
		margin-left: 50%;
		transform: translateX(-50%)
	}

	/* 标签页 */
	.tab-bar {
		height: 40px;
		background-color: #fff;
		display: flex;
		border-bottom: 1px solid #eee;
	}

	.tab-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 16px;
		color: #666;
		padding-bottom: 5px;
	}

	.tab-item.active {
		color: #007AFF;
		border-bottom: 2px solid #007AFF;
	}

	/* 优惠券列表 */
	.coupon-list {
		padding: 10px;
	}

	.coupon-card {
		background-color: #fff;
		border-radius: 10px;
		margin-bottom: 10px;
		overflow: hidden;
		display: flex;
		position: relative;
	}

	.coupon-left {
		width: 80px;
		background-color: #f0f0f0;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10px;
	}

	.amount-box {
		text-align: center;
	}

	.amount-label {
		font-size: 12px;
		color: #666;
		margin-bottom: 5px;
	}

	.amount {
		font-size: 28px;
		font-weight: bold;
		color: #333;
	}

	.amount-unit {
		font-size: 16px;
		color: #333;
	}

	.coupon-right {
		flex: 1;
		padding: 15px;
		position: relative;
	}

	.coupon-title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 8px;
	}

	.coupon-desc {
		font-size: 12px;
		color: #666;
		margin-bottom: 8px;
		line-height: 1.4;
	}

	.coupon-time {
		font-size: 12px;
		color: #999;
		margin-bottom: 10px;
	}

	.status-tag {
		position: absolute;
		top: 10px;
		right: 10px;
		background-color: rgba(0, 0, 0, 0.5);
		color: #fff;
		padding: 2px 8px;
		border-radius: 4px;
		font-size: 12px;
	}

	.detail-btn {
		position: absolute;
		bottom: 10px;
		right: 10px;
		color: #007AFF;
		font-size: 12px;
		text-decoration: underline;
	}

	/* 弹窗样式 */
	.modal-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;
	}

	.modal-content {
		background-color: #fff;
		border-radius: 10px;
		width: 90%;
		max-width: 300px;
		overflow: hidden;
	}

	.modal-header {
		padding: 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #eee;
	}

	.modal-title {
		font-size: 18px;
		font-weight: bold;
	}

	.close-btn {
		font-size: 20px;
		color: #999;
	}

	.modal-body {
		padding: 15px;
	}

	.detail-item {
		margin-bottom: 10px;
	}

	.detail-label {
		font-size: 14px;
		color: #666;
		margin-right: 10px;
	}

	.detail-value {
		font-size: 14px;
		color: #333;
	}
</style>